<template>
  <div class="box">
    <header class="header">
      <div class="my_PersonalHeader">
        <van-nav-bar
          title="个人信息"
          left-arrow
          @click-left="$router.push('/my')"
        />
      </div>
    </header>
    <div class="content">
      <div class="contents">
        <!-- 头像显示 -->
        <van-cell is-link @click="HeadPortraitOpenFn">头像
          <img :src=HeadPortrait alt="" style="width:.30rem;height:.30rem;float:right;" class="HeadPortrait">
        </van-cell>
        <!-- 头像弹出框 -->
        <!-- <van-action-sheet v-model="HeadPortraitTxt" :actions="HeadPortraitactions" @select="HeadPortraitCloseFn" duration=".2" size=".50rem" /> -->
        <van-popup v-model="HeadPortraitTxt" round position="bottom" :style="{ height: '24.5%', background: '#989898'}">
          <van-uploader :after-read="HeadPortraitphotographFn" capture="camera" preview-size=".30rem">
            <van-button type="primary">拍照</van-button>
          </van-uploader>
          <van-uploader :after-read="HeadPortraitalbumFn" preview-size=".30rem">
            <van-button type="primary" result-type="dataUrl">上传文件</van-button>
          </van-uploader>
          <!-- <input type="file" @change="HeadPortraitalbumFn" id="but"> -->
          <van-button type="primary" size="large" style="margin-top:.05rem;border-radius:.10rem;" color="#ffffff"  @click="HeadPortraitCancelFn"><span style="color: black;">取消</span></van-button>
        </van-popup>
        <!-- id显示 -->
        <van-cell>id
          <span style="float:right;">{{id}}</span>
        </van-cell>
        <!-- 昵称显示 -->
        <van-cell is-link @click="usernameOpenFn">昵称
          <span style="float:right;">{{username}}</span>
        </van-cell>
        <!-- 昵称弹出框 -->
        <van-popup v-model="usernameTxt" class="username">
          <p style="margin-bottom:.3rem;">昵称</p>
          <input v-model="usernamevalue" type="text" placeholder="请输入2-12位昵称" class="usernameiup">
          <div class="usernameBut">
            <van-button type="default" class="usernameCancel" @click="usernameCloseFn">取消</van-button>
            <van-button type="default" class="usernameDetermine" @click="usernameObtainFn">确定</van-button>
          </div>
        </van-popup>
        <!-- 性别显示 -->
        <van-cell is-link @click="sexOpenFn">性别
          <span style="float:right;">{{sex}}</span>
        </van-cell>
        <!-- 性别弹出框 -->
        <van-action-sheet v-model="sexTxt" :actions="sexactions" @select="sexCloseFn" duration=".2" />
        <!-- 手机号显示 -->
        <van-cell is-link  @click="$router.push('/my_Personal_Tel')">手机号
          <span style="float:right;">{{tel}}</span>
        </van-cell>
        <!-- 退出登录按钮 -->
        <van-button type="primary" size="large" color="#ffffff" @click="SignOut">
          <p style="color: black;">退出登录</p>
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
// 直接导入axios请求其他接口数据
import axios from 'axios'
// 导入请求数据函数
import { userinfo, ModifyUserName, ModifyUserSex, userlogout } from '@/api'
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, ActionSheet, Toast, Cell, CellGroup, Popup, Field, Button, Dialog, Uploader } from 'vant'
Vue.use(NavBar)
Vue.use(ActionSheet)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Popup)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Uploader)
export default {
  // 设置data初始值
  data () {
    return {
      // 头像
      HeadPortrait: 'https://s1.ax1x.com/2020/05/06/YVNXdK.png',
      // 头像弹出
      HeadPortraitTxt: false,
      // 头像弹出框显示列表
      // HeadPortraitactions: [
      //   { name: '拍照' },
      //   { name: '从相册里选' },
      //   { name: '取消' }
      // ],
      // 用户id
      id: '',
      // 昵称
      username: '',
      // 昵称弹出
      usernameTxt: false,
      // 昵称输入框
      usernamevalue: '',
      // 性别
      sex: '',
      // 性别弹出
      sexTxt: false,
      // 性别弹出框显示列表
      sexactions: [
        { name: '男' },
        { name: '女' },
        { name: '取消' }
      ],
      // 手机号
      tel: '请绑定' // 绑定手机号这一块,直接是跳转到下一个页面中来更改的,直接更改后修改了后端的数据后在跳转回这个页面中,数据就会重新请求一遍,手机号自然后显示出来了
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {
    // localStroage中获取id值
    this.id = localStorage.getItem('lazypiguserid')
    // 当id值请求完毕以后就可以进行根据id值获取头像,根据用户id从其他接口中(自己写得node后端)获取到用户头像数据调用封装函数
    this.getuserimage(this.id)
    // 请求用户信息
    userinfo().then((res) => {
      // console.log(res)
      this.username = res.data.data.user_info.username
      if (res.data.data.user_info.sex === 1) {
        this.sex = '男'
      } else if (res.data.data.user_info.sex === 0) {
        this.sex = '女'
      } else {
        this.sex = '未设置'
      }
      this.tel = res.data.data.user_info.phone
    })
  },
  // 计算属性
  methods: {
    // 封装请求头像的函数
    getuserimage (id) {
      axios({
        method: 'post',
        url: 'http://m.zhangbing.cool/api/lazypig/obtainlazypigavatar',
        data: {
          userid: Number(id)
        }
      }).then((res) => {
        // console.log('1111', res)
        this.HeadPortrait = res.data.data
      })
    },
    // 头像弹出框打开
    HeadPortraitOpenFn () {
      this.HeadPortraitTxt = true
    },
    // 头像弹出框关闭
    // HeadPortraitCloseFn (item) {
    //   // 默认情况下点击选项时不会自动收起
    //   // 可以通过 close-on-click-action 属性开启自动收起
    //   // 将HeadPortraitTxt的值改为false就是关闭弹出框了
    //   this.HeadPortraitTxt = false
    //   // Toast(item.name)
    //   if (item.name === '拍照') {
    //     // 在这里调用拍照功能函数
    //     Toast('拍照')
    //   }
    //   if (item.name === '从相册里选') {
    //     // 在这里调用调用相册的功能函数
    //     Toast('从相册里选')
    //   }
    // },
    // 头像弹出框,拍照成功后的回调
    HeadPortraitphotographFn (file) {
      axios({
        method: 'post',
        url: 'http://m.zhangbing.cool/api/lazypig/lazypigavatar',
        data: {
          userid: Number(this.id),
          avatar: file.content
        }
      }).then(res => {
        // console.log(res)
        if (res.data.code === '200') {
          // 数据更新成功以后重新请求头像数据,并渲染页面
          this.getuserimage(this.id)
          // 并关闭弹出框
          this.HeadPortraitTxt = false
        }
      })
    },
    // 头像弹出框中,点击相册选择文件成功之后的回调函数
    HeadPortraitalbumFn (file) {
      // console.log(file.content)
      axios({
        method: 'post',
        url: 'http://m.zhangbing.cool/api/lazypig/lazypigavatar',
        data: {
          userid: Number(this.id),
          avatar: file.content
        }
      }).then(res => {
        // console.log(res)
        if (res.data.code === '200') {
          // 数据更新成功以后重新请求头像数据,并渲染页面
          this.getuserimage(this.id)
          // 并关闭弹出框
          this.HeadPortraitTxt = false
        }
      })
      // 1
      // const docFile = document.getElementById('but').files
      // console.log(docFile)
      // const formData = new FormData()
      // formData.append('myFile', docFile)
      // 2
      // const deviceFile = [] // 选择的图片数组
      // const formData = new FormData()
      // deviceFile.push(file)
      // console.log(deviceFile)
      // deviceFile.map((item) => {
      //   // files是后台参数name字段对应值
      //   console.log(item)
      //   formData.append('files', item.file, item.file.name)
      //   console.log(formData)
      // })
      // console.log('选择值', file)
      // console.log('formData值', formData.getAll('files'))
      // console.log(formData)
      // ModifyUserimage({
      //   title_image: formData
      // }).then((res) => {
      //   console.log(res)
      // })
      // 3
      // console.log(e.target.files[0])
      // const file = e.target.files[0]
      // const reader = new FileReader()
      // const that = this
      // reader.readAsDataURL(file)
      // reader.onload = function (e) {
      //   that.avatar = this.result
      //   console.log('111', that.avatar)
      // }
      // console.log(file)
      // console.log(file.file)
      // // console.log(file.content) // 这个是base64
      // ModifyUserimage({
      //   title_image: file.file
      // }).then((res) => {
      //   console.log(res)
      // })
      // this.HeadPortraitTxt = false
      // // this.HeadPortrait = file.content
    },
    // 头像弹出取消按钮
    HeadPortraitCancelFn () {
      this.HeadPortraitTxt = false
    },
    // 昵称弹出框打开
    usernameOpenFn () {
      this.usernameTxt = true
    },
    // 昵称弹出框中取消按钮
    usernameCloseFn () {
      this.usernameTxt = false
    },
    // 昵称弹出框中确定按钮
    usernameObtainFn () {
      // 点击确定按钮获取到用户所要更改的昵称然后判断一下是否符合规则,并同步到后端数据
      if (this.usernamevalue.length >= 2 && this.usernamevalue.length <= 12) {
        // console.log(this.usernamevalue)
        // this.username = this.usernamevalue
        ModifyUserName({ username: this.usernamevalue }).then((res) => {
          // console.log(res)
          if (res.data.code === 200) {
            Toast('用户名修改成功')
            // 修改成功以后重新请求用户数据,重新渲染
            userinfo().then((res) => {
              this.username = res.data.data.user_info.username
            })
          } else {
            Toast('修改失败与前一个用户名重名')
          }
        })
        // 所有工作都完成之后清空输入框并关闭弹出的模态框
        this.usernamevalue = ''
        this.usernameTxt = false
      } else {
        this.usernamevalue = ''
        Toast('请至少输入二个字符,最多输入十二个字符')
      }
    },
    // 性别弹出框打开
    sexOpenFn () {
      this.sexTxt = true
    },
    // 性别弹出框关闭
    sexCloseFn (item) {
      if (item.name === '男') {
        ModifyUserSex({
          sex: '1'
        }).then((res) => {
          if (res.data.code === 200) {
            Toast('性别: 男; 修改成功')
            res.data.data.sex === '1' ? this.sex = '男' : this.sex = '女'
          }
        })
      }
      if (item.name === '女') {
        ModifyUserSex({
          sex: '0'
        }).then((res) => {
          Toast('性别: 女; 修改成功')
          console.log(res)
          res.data.data.sex === '0' ? this.sex = '女' : this.sex = '男'
        })
      }
      // 最后将sexTxt的值改为false就是关闭弹出框了
      this.sexTxt = false
    },
    // 退出登录
    SignOut () {
      // 退出登录后删除localStroage中保存的关于这个应用的所有数据,改变localStroage中的数据,并跳转至登录注册页,如果有后续数据库操作直接往后边加就是了
      Dialog.confirm({
        title: '退出登录',
        message: '确认退出当前账号?'
      }).then(() => { // 确认按钮
        userlogout().then((res) => {
          // console.log(res)
          if (res.data.code === 200) {
            Toast('退出登录')
            localStorage.setItem('lazypigislogin', 'false')
            this.$router.replace('/loginAndregister')
          }
        })
        // on confirm
      }).catch(() => { // 取消按钮
        // on cancel
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  @import "@/lib/reset.scss";
  .my_PersonalHeader {
    @include rect(100%, .6rem);
    @include background-color(#FDD949);
    /deep/ .van-nav-bar {
      height: .6rem;
      line-height: 0.6rem;
      text-align: center;
      background-color: #FDD949;
      user-select: none;
      // 通知栏左侧箭头
      /deep/ .van-icon-arrow-left {
        color: black;
        font-size: .20rem;
      }
      // 通知栏标题
      /deep/ .van-nav-bar__title {
        font-size: .16rem;
      }
    }
  }
  .contents {
    height: 100%;
    width: 100%;
    background-color: #eaeaea;
    position: relative;
    // 头像
    .HeadPortrait {
      border-radius: 50%;
    }
    // 单元格
    .van-cell {
      font-size: .15rem;
      height: .50rem;
      align-items: center;
      // 单元格右侧的箭头
      .van-icon-arrow {
        font-size: .20rem;
      }
      // 单元格中显示内容的区域
      .van-cell__value {
        overflow: visible;
      }
    }
    // 头像弹出框中的按钮区域,充满整个弹出框
    /deep/ .van-uploader {
      width: 100%;
      /deep/ .van-uploader__input-wrapper {
        width: 100%;
        // 其中的按钮
        /deep/ .van-button--primary {
          width: 100%;
          background-color: #ffffff;
          border: #ffffff;
          border-radius: .10rem;
          margin-top: 0;
          &:nth-of-type(1) {
            margin-bottom: .03rem;
          }
        }
      }
    }
    // 昵称弹出框
    .username {
      text-align: center;
      width: 3rem;
      height: 1.5rem;
      border-bottom:#fef5cf;
      @include border-radius(.2rem);
      .usernameiup {
        width: 100%;
        height: .35rem;
        border: 0;
        padding: 0 .10rem;
        border-bottom: 1px solid #fff8dc;
      }
      // 用户按钮
      .usernameBut {
        position: absolute;
        right: .05rem;
        bottom: .05rem;
        // 确定取消按钮
        .van-button {
          margin-right: .05rem;
          border: 0;
          &:nth-of-type(1) {
            margin-right: .53rem;
          }
        }
      }
    }
    // 所有下方弹出层
    /deep/ .van-popup {
      // 所有下方弹出层种的按钮
      /deep/ .van-action-sheet__item {
        height: .49rem;
        border-radius: .15rem;
      }
    }
    // Toast轻提示
    /deep/ .van-toast {
      font-size: .15rem;
    }
    // 退出登录
    .van-button--primary {
      margin-top: .25rem;
      height: .50rem;
    }
  }
</style>
